<script lang="ts" setup>
import { ref } from 'vue';

const activeIndex = ref('1');
import {useMenuStore} from "@/store/useMenuStore";
const menuStore = useMenuStore();
const menu = menuStore.menu

// 判断是否有子项的公共方法
const hasChildren = (item: any): boolean => {
  return item.children && item.children.length > 0;
}
const handleSelect = (key) => {
  console.log('Selected:', key);
  console.log(menu);
};
import {useTagBarStore} from "@/store/useTagBarStore";
const tagBarStore = useTagBarStore();
// 菜单点击事件
const menuClick = (item) => {
  console.log(item);
  // tagBarStore.setTagList(item)
};
</script>

<template>
<div>
  <el-menu
    :default-active="activeIndex"
    mode="vertical"
    @select="handleSelect"
    router
  >
    <!-- 动态渲染主菜单项 -->
    <template v-for="item in menu" :key="item.id">
      <!-- 有子项时渲染为折叠菜单 -->
      <el-sub-menu
        v-if="hasChildren(item)"
        :index="item.path"
      >
        <template #title>
          <span>{{ item.name }}</span>
        </template>

        <!-- 子项分组渲染 -->
        <el-menu-item
          v-for="group in item.children"
          :key="group.path"
          :index="group.path"
          @click="menuClick(group)"
        >

            {{ group.name }}
        </el-menu-item>
      </el-sub-menu>

      <!-- 无子项时渲染为普通菜单项 -->
      <el-menu-item
        v-else
        :index="item.index"
      >
        {{ item.title }}
      </el-menu-item>
    </template>
  </el-menu>
</div>
</template>

<style scoped lang="scss">

</style>
